import React, { useCallback } from "react"
import { Field_FormSave, Field_name_id } from "@/components/utils/field.list"
import { FormProps } from "@/components/modal/form.modal"
import adminPermissionsService from "@/services/admin.permission.service"
import { FormRender } from "@whzhuke/antd"

import useForm from "antd/es/form/hooks/useForm"
interface Props {
  values?: any
}
export const EditPermissions: React.FC<Props & FormProps> = props => {
  const { values, onDone } = props
  const [form] = useForm<any>()
  const onFinish = useCallback(data => {
    adminPermissionsService[values ? "edit" : "add"]({ ...data }).then(res => {
      onDone?.()
    })
  }, [])

  return (
    <FormRender
      form={form}
      initialValues={props.values || { enabled: !0 }}
      layout="horizontal"
      onFinish={onFinish}
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ width: 600 }}
      fieldList={[
        props.values ? Field_name_id : undefined,
        { fieldType: "input", formItemConfig: { required: !0, name: "permissionName", label: "名称" }, config: { placeholder: "输入名称" } },
        {
          fieldType: "radioGroup",
          formItemConfig: { required: !0, name: "enabled", label: "状态" },
          config: {
            optionType: "button",
            options: [
              {
                label: "启用",
                value: true
              },
              {
                label: "禁用",
                value: false
              }
            ]
          }
        },
        { fieldType: "textArea", formItemConfig: { name: "description", label: "描述" }, config: { placeholder: "输入角色介绍" } },
        { ...Field_FormSave, formItemConfig: { wrapperCol: { offset: 8, span: 16 } } }
      ]}
      autoComplete="off"
    />
  )
}
